import { FC, useState } from 'react';
import { Layout } from 'antd';
import MenuList from './components/MenuList';
import Head from './components/Head';
import { IRouteComponentProps } from 'umi';

import './index.less';

const { Content, Footer, Sider } = Layout;

const Admin: FC<IRouteComponentProps> = ({ children }) => {
  // 控制左边的Sider的展开与收拢
  const [collapsed, set_collapsed] = useState<boolean>(false);
  const onCollapse = (collapsed: boolean) => {
    set_collapsed(collapsed);
  };
  return (
    <Layout style={{ minHeight: '100vh' }}>
      {/* 左边导航部分 */}
      <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
        <div className="logo" />
        {/* 菜单 */}
        <MenuList />
      </Sider>
      {/* 右边部分 */}
      <Layout className="site-layout">
        <Head />
        <Content style={{ margin: '16px' }}>
          <div
            className="site-layout-background"
            style={{ padding: 24, minHeight: 360 }}
          >
            {children}
            {/* {location.pathname === '/admin' ? (
              <Redirect to="/admin/welcome"></Redirect>
            ) : (
              children
            )} */}
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>
          Ant Design ©2018 Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  );
};

export default Admin;
